<template>
  <el-dialog
    title="环境变量管理"
    :visible="true"
    width="800px"
    @close="$emit('close')"
  >
    <div class="environment-manager">
      <div class="env-toolbar">
        <el-button type="primary" size="small" @click="addEnvironment">
          <i class="el-icon-plus"></i> 新建环境
        </el-button>
        <el-button size="small" @click="importEnvironment">
          <i class="el-icon-upload"></i> 导入
        </el-button>
        <el-button size="small" @click="exportEnvironment">
          <i class="el-icon-download"></i> 导出
        </el-button>
      </div>

      <el-table :data="environments" style="width: 100%">
        <el-table-column prop="name" label="环境名称" width="150">
          <template slot-scope="scope">
            <el-input
              v-if="scope.row.editing"
              v-model="scope.row.name"
              size="small"
            />
            <span v-else>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="variables" label="变量">
          <template slot-scope="scope">
            <div class="variables-list">
              <div
                v-for="(variable, index) in scope.row.variables"
                :key="index"
                class="variable-item"
              >
                <el-input
                  v-model="variable.key"
                  placeholder="变量名"
                  size="small"
                  :disabled="!scope.row.editing"
                />
                <span>=</span>
                <el-input
                  v-model="variable.value"
                  placeholder="变量值"
                  size="small"
                  :disabled="!scope.row.editing"
                />
                <el-button
                  v-if="scope.row.editing"
                  type="text"
                  size="small"
                  @click="removeVariable(scope.row, index)"
                >
                  <i class="el-icon-delete"></i>
                </el-button>
              </div>
              <el-button
                v-if="scope.row.editing"
                type="text"
                size="small"
                @click="addVariable(scope.row)"
              >
                <i class="el-icon-plus"></i> 添加变量
              </el-button>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              v-if="!scope.row.editing"
              type="text"
              size="small"
              @click="editEnvironment(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              v-if="scope.row.editing"
              type="text"
              size="small"
              @click="saveEnvironment(scope.row)"
            >
              保存
            </el-button>
            <el-button
              v-if="scope.row.editing"
              type="text"
              size="small"
              @click="cancelEdit(scope.row)"
            >
              取消
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="setActive(scope.row)"
              :disabled="scope.row.id === activeEnvironment?.id"
            >
              {{ scope.row.id === activeEnvironment?.id ? '当前环境' : '设为当前' }}
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="deleteEnvironment(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <span slot="footer">
      <el-button @click="$emit('close')">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'EnvironmentDialog',
  computed: {
    ...mapState(['environments', 'activeEnvironment'])
  },
  methods: {
    ...mapActions(['addEnvironment', 'updateEnvironment', 'deleteEnvironment', 'setActiveEnvironment']),
    
    addEnvironment() {
      const newEnv = {
        id: `env_${Date.now()}`,
        name: '新环境',
        variables: [{ key: '', value: '' }],
        editing: true
      }
      this.addEnvironment(newEnv)
    },
    
    addVariable(env) {
      env.variables.push({ key: '', value: '' })
    },
    
    removeVariable(env, index) {
      env.variables.splice(index, 1)
    },
    
    editEnvironment(env) {
      env.editing = true
      env._backup = JSON.stringify(env)
    },
    
    saveEnvironment(env) {
      delete env.editing
      delete env._backup
      this.updateEnvironment({ id: env.id, data: env })
    },
    
    cancelEdit(env) {
      if (env._backup) {
        const backup = JSON.parse(env._backup)
        Object.assign(env, backup)
      }
      env.editing = false
    },
    
    setActive(env) {
      this.setActiveEnvironment(env)
    },
    
    deleteEnvironment(env) {
      this.$confirm('确定删除该环境？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteEnvironment(env.id)
        this.$message.success('删除成功')
      })
    },
    
    importEnvironment() {
      this.$message.info('导入功能开发中')
    },
    
    exportEnvironment() {
      this.$message.info('导出功能开发中')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/variables.scss';

.environment-manager {
  .env-toolbar {
    margin-bottom: $spacing-medium;
  }
  
  .variables-list {
    .variable-item {
      display: flex;
      align-items: center;
      gap: $spacing-small;
      margin-bottom: $spacing-small;
      
      .el-input {
        flex: 1;
      }
    }
  }
}
</style>